<template>
  <div class="setting-container">
    <el-menu :default-active="activeName" @select="changemenu" style="width: 220px">
      <el-menu-item :index="'queue'">
        <i class="el-icon-menu"></i>
        <span slot="title">队列管理</span>
      </el-menu-item>
      <el-menu-item :index="'project'">
        <i class="el-icon-s-finance"></i>
        <span slot="title">项目管理</span>
      </el-menu-item>
      <el-menu-item :index="'user'">
        <i class="el-icon-user-solid"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item :index="'set'">
        <i class="el-icon-s-tools"></i>
        <span slot="title">配置管理</span>
      </el-menu-item>
    </el-menu>
    <div class="main_content">
      <setting-project v-if="activeName == 'project'" />
      <setting-queue v-else-if="activeName == 'queue'" />
      <setting-user v-else-if="activeName == 'user'" />
      <setting-set v-else-if="activeName == 'set'" />

    </div>
  </div>
</template>
<script>
import projectList from "../project/project-list";
import settingQueue from "./components/setting-queue";
import settingUser from "./components/setting-user";
import settingProject from './components/setting-project'
import settingSet from './components/setting-set'
export default {
  name: "Setting",
  components: {
    projectList,
    settingQueue,
    settingUser,
    settingProject,
    settingSet
  },
  props: {
    project_id: String
  },
  provide() {
    return {
      project_id: this.project_id
    };
  },
  data() {
    return {
      activeName: "queue"
    };
  },
  methods: {
    changemenu(item) {
      this.activeName = item;
    }
  },
  created(){
    this.$http.role.getUserRole().then(res=>{
      if(res!=true){
        this.$router.back()
      }
    })
  }
};
</script>
<style lang="scss" scoped>
.setting-container {
  box-sizing: border-box;
  border: 1px solid #e4e7ed;
  display: flex;
  height: 100%;
  width: 100%;
  .main_content {
    width: calc(100% - 220px);
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    padding: 20px;
  }
}
</style>
